<template>
   <!-- 加载图标样式2 -->
   <div class="loading"></div>
</template>

<script setup>

</script>

<style scoped lang='scss'>
.loading {
   --shadowColor: #ea4e3d;
   animation: rectangle 1s ease-in-out -.2s infinite;
   background-color: #ea4e3d;
   display: block;
   height: 10px;
   position: relative;
   width: 6px
}

.loading:after,
.loading:before {
   content: "";
   height: 10px;
   position: absolute;
   width: 6px
}

.loading:before {
   --shadowColor: #04be02;
   animation: rectangle 1s ease-in-out -.4s infinite;
   background-color: #04be02;
   left: -14px
}

.loading:after {
   --shadowColor: #ffaa09;
   animation: rectangle 1s ease-in-out infinite;
   background-color: #ffaa09;
   right: -14px
}

@keyframes rectangle {
   0%,
   80%,
   to {
      box-shadow: 0 0 var(--shadowColor);
      height: 20px
   }

   40% {
      box-shadow: 0 -20px var(--shadowColor);
      height: 30px
   }
}
</style>
